<template>
	<teleport v-if="visibles.search && searchContainer" :to="searchContainer">
		<search-input v-model:params="params" v-bind="searchOption" />
	</teleport>
	<vxe-grid ref="grid" v-bind="gridOptions"></vxe-grid>
</template>

<script setup lang="ts">
	import {onUnmounted, reactive, ref, useAttrs, onMounted} from 'vue'
	import {VxeGridProps} from 'vxe-table'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import {getAccessList, getLockList} from '@/api/device'
	import {microApps} from '@/micros/apps'
	import {SearchProps} from 'yuxin-base/src/types'
	import {DEVICETYPE_ENUM} from '@/types/device'

	withDefaults(
		defineProps<{
			searchContainer?: string | boolean
		}>(),
		{
			searchContainer: '#dialog_header_search'
		}
	)

	const attrs = useAttrs()
	// 搜索配置
	const searchOption = reactive<SearchProps>({
		placeholder: '请输入需要查找的房源地址',
		// 搜索匹配类型
		matchTypes: [],
		// 搜索选项配置
		options: [],
		onSearch() {
			onSearch()
		}
	})
	const params = ref({
		like: null
	})
	const visibles = reactive({
		search: false
	})

	const grid = ref()
	const gridOptions = reactive<VxeGridProps>({
		align: 'center',
		height: 'auto',
		showOverflow: true,
		rowConfig: {isHover: true},
		columns: [],
		pagerConfig,
		proxyConfig: {
			props: proxyConfigProps,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					console.log(params.value)
					const exparams = getParmas()
					const {
						query: {deviceType}
					} = attrs as any
					const SearchKey: any = deviceType !== DEVICETYPE_ENUM.GATEWAY ? 'address' : 'communityName'
					return queryData({current, size, [SearchKey]: params.value.like, ...exparams})
				}
			}
		}
	})

	async function queryData(query: any) {
		const {
			query: {deviceType}
		} = attrs as any
		const isLock = deviceType !== DEVICETYPE_ENUM.GATEWAY
		const extraParams = isLock ? {} : {alarm: 1}
		const API = isLock ? getLockList : getAccessList
		const res = await API({...query, ...extraParams})
		res.data.records = res.data.records.map((data: any) => {
			return {
				...data
			}
		})
		return res
	}

	function onSearch() {
		grid.value.commitProxy('query')
	}

	const setColums = () => {
		console.log(attrs)
		const {
			query: {deviceType, online, lowpower}
		} = attrs as any
		console.log(DEVICETYPE_ENUM)
		const fieldList = [
			{title: '地址', field: 'address'},
			{title: '房间', field: 'doorplate'},
			{title: '房间状态', field: 'roomStatusName'},
			{title: '电量', field: 'battery'},
			{title: '更新时间', field: 'lastBatteryTime'},

			{title: '地址', field: 'location'},
			{title: '位置', field: 'buildingName'},
			{title: '设备名称', field: 'name'},
			{title: '离线时间', field: 'lastOnlineTime'}
		]
		const defaultOfflineField = fieldList.filter((e: any) => ['address', 'doorplate', 'roomStatusName', 'lastOnlineTime'].includes(e.field))
		const lowPowerField = fieldList.filter((e: any) => ['address', 'doorplate', 'roomStatusName', 'battery', 'lastBatteryTime'].includes(e.field))
		const gatwayField = fieldList.filter((e: any) => ['location', 'buildingName', 'name', 'lastOnlineTime'].includes(e.field))
		const colMap = {
			[DEVICETYPE_ENUM.WATER]: defaultOfflineField,
			[DEVICETYPE_ENUM.MIDWATER]: defaultOfflineField,
			[DEVICETYPE_ENUM.HOTWATER]: defaultOfflineField,
			[DEVICETYPE_ENUM.ELECTRICITY]: defaultOfflineField,
			[DEVICETYPE_ENUM.DOORLOCK]: lowpower ? lowPowerField : defaultOfflineField,
			[DEVICETYPE_ENUM.GATEWAY]: gatwayField
		}
		const type = deviceType as keyof DEVICETYPE_ENUM
		gridOptions.columns = colMap[type]
	}

	const getParmas = () => {
		const {
			query: {deviceType, online, lowpower}
		} = attrs as any
		const res = {
			online: 2
		}
		const paramsMap = {
			[DEVICETYPE_ENUM.WATER]: {online: 2, deviceType},
			[DEVICETYPE_ENUM.MIDWATER]: {online: 2, deviceType},
			[DEVICETYPE_ENUM.HOTWATER]: {online: 2, deviceType},
			[DEVICETYPE_ENUM.ELECTRICITY]: {online: 2, deviceType},
			[DEVICETYPE_ENUM.DOORLOCK]: lowpower ? {online: 1, deviceType, lowBatteryStatus: 1} : {online: 2, deviceType},
			[DEVICETYPE_ENUM.GATEWAY]: {online: false}
		}
		const type = deviceType as keyof DEVICETYPE_ENUM

		return {
			...paramsMap[type]
		}
	}
	onMounted(() => {
		visibles.search = true
		setColums()
	})
	onUnmounted(() => {
		visibles.search = false
		microApps.removeApp('device')
	})
</script>

<style scoped>
	.modal-container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.search-container {
		padding-bottom: 12px;
		display: flex;
	}

	.modal-grid {
		flex: 1;
		overflow: hidden;
	}

	.select-house {
		height: 32px;
	}
</style>
